<template>
  <div>
    <!-- 辅助信息音频 -->
    <!-- <audio :src="urls + props.info?.url" ref="myAudio"></audio> -->
    <div
      class="audioBox"
      id="audiobox"
      :style="{
        background: props.backgroundColor,
        color: props.color,
      }"
    >
      <div class="audio-top">
        <div class="audio-name">
          {{ props.info?.name }}
        </div>
        <!-- 开关 -->
        <div class="audio-icon">
          <van-icon name="play" v-if="!isPlay" @click="isPlayAudio(1)" />
          <van-icon name="pause" v-else @click="isPlayAudio(2)" />
        </div>
      </div>
      <div class="audio-bottom">
        <div class="audio-time-left" :style="{ color: props.timeColor }">{{ realMusicTime }}</div>
        <div class="audio-scroll">
          <!-- 进度条 -->
          <van-slider
            @change-end="handleMouseUp"
            :label="false"
            :showStep="false"
            :tooltipProps="{ placement: 'bottom' }"
            v-model="percentage"
            @change="change"
            @drag-start="start"
            :active-color="props.color"
            class="audiocolor"
          >
            <template #button>
              <div
                class="custom-button"
                :style="{
                  background: props.color,
                }"
              ></div>
            </template>
          </van-slider>
        </div>
        <div class="audio-time-right" :style="{ color: props.timeColor }">{{ totalMusicTime }}</div>
      </div>
    </div>
  </div>
  <audio :src="urls + props.info?.url" ref="audioRef" v-show="false" @ended="ended" />
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick, watch, reactive, computed } from 'vue';
import { urls } from '@/utils/request/upload';
import { colorList6 } from '../../data';
import { useProjectStore } from '@/store';
import { onUnmounted } from 'vue';
import { Slider } from 'vant';
export default defineComponent({
  name: 'IAudio',
});
</script>
<script lang="ts" setup>
const props = defineProps<{
  info: any;
  color: any;
  backgroundColor: any;
  id: {
    type: Number;
  };
  url: {
    type: String;
  };
  description: {
    type: String;
  };
  name: {
    type: String;
  };
  nameColor: {
    //标题颜色
    type: String;
    default: 'rgba(0, 0, 0, 0.8)';
  };
  timeColor: {
    //事件颜色
    type: String;
    default: 'rgba(38, 41, 51, 1)';
  };
  iconColor: {
    //图标颜色
    type: String;
    default: '#262933';
  };
  background: {
    //背景颜色
    type: String;
    default: '#FFFFFF';
  };
  playColor: {
    type: String;
    default: '#FFFFFF';
  };
}>();
const isPlay = ref(false);
const myAudio = ref();
const audioScroll = ref();
const store = useProjectStore();
const realMusicTime = ref('00:00');
const totalMusicTime = ref('00:00');
const emit = defineEmits(['delAudioUrl']);
const audioRef = ref(null);
const percentage = ref(0);
const move = ref(false);
const timer = ref(null);
const playBtmShow = ref(false);
const downClickType = ref(false);
const moveTop = ref(true);

// 音乐开关
const isPlayAudio = (index: number) => {
  if (index === 1) {
    audioRef.value.play();
    isPlay.value = true;
  } else {
    audioRef.value.pause();
    isPlay.value = false;
  }
  nextTick(() => {
    // console.log(audioRef.value.duration, '当前播放进度');
  });
};
// 播放完毕
const ended = () => {
  console.log('播放完成');
  isPlay.value = false;
};

const handMusicBar = () => {
  let duration = audioRef.value.duration;
  let x = ((audioRef.value.currentTime / duration) * 100).toFixed(1);
  if (move.value) {
    clearTimeout(timer.value);
    return;
  } else {
    timer.value = setTimeout(() => {
      percentage.value = Number(x);
    }, 200);
  }
  console.log(x, '当前播放百分比');
};

// 处理时间
const handlMusicTime = () => {
  //用秒数来显示当前播放进度
  let timeDisplay = Math.floor(audioRef.value.currentTime); //获取实时时间
  //分钟
  let minute: string | number = parseInt(timeDisplay / 60);
  if (minute < 10) {
    minute = '0' + minute;
  }
  //秒
  let second: string | number = Math.round(timeDisplay % 60);
  if (second < 10) {
    second = '0' + second;
  }
  realMusicTime.value = minute + ':' + second;
};

const watchMusicTime = () => {
  let music = audioRef.value;

  music.addEventListener(
    'timeupdate',
    () => {
      handlMusicTime();
      nextTick(() => {
        handMusicBar();
      });
    },
    false,
  );
  // 捕获音频文件已准备完毕
  // 当媒体文件可以播放的时候会触发oncanplay事件,也可以用oncanplay
  music.oncanplaythrough = () => {
    let time = audioRef.value.duration;

    //分钟
    let minutes: number | string = parseInt(time / 60);
    if (minutes < 10) {
      minutes = '0' + minutes;
    }
    //秒
    let seconds: number | string = Math.round(time % 60);
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    totalMusicTime.value = minutes + ':' + seconds;
  };
};
// 处理点击进度条事件
const handClickBar = (e) => {
  audioRef.value.currentTime = (percentage.value / 100) * audioRef.value.duration; // 计算播放时间 位置百分比*总时间
  nextTick(() => {
    myAudio.value.play();
    isPlay.value = true;
  });
};
const change = () => {};
const play = () => {
  if (!playBtmShow.value) {
    playBtmShow.value = true;
  }
  if (audioRef.value.paused) {
    myAudio.value.play();
    isPlay.value = true;
  } else {
    myAudio.value.pause();
    isPlay.value = false;
  }
};
onMounted(() => {
  watchMusicTime();
});
</script>

<style lang="less" scoped>
.audiocolor {
  width: 195px;
  height: 2px;
  margin: 10px 8px;
  background: #91b0b8;
}
.custom-button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.audio-scroll {
  // width: 336px;
  // margin-top: 13px;
}
.audio-time-left {
  white-space: nowrap;
  width: 38px;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #26464e;
  line-height: 22px;
  text-align: left;
}
.audio-time-right {
  white-space: nowrap;
  width: 38px;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #26464e;
  line-height: 22px;
  text-align: left;
}
.audio-icon {
  font-size: 30px;
  margin-right: 22px;
}
.audio-name {
  width: 278px;
  font-family: PingFang SC;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
.audio-top {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .audio-name {
    width: 192px;
    min-height: 24px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #26464e;
    line-height: 24px;
    text-align: left;
  }
  .audio-icon {
    font-size: 24px;
  }
}
.audioBox {
  width: 100%;
  padding: 12px;
}
.audio-bottom {
  display: flex;
  margin-top: 8px;
  height: 22px;
}
</style>
